<template>
    <div class="article-detail-container">
        <div class="content-wrapper">
            <div class="article-header">
                <div class="breadcrumb">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>
                            <router-link to="/article">社区</router-link>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>文章详情</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                
                <div class="article-info" v-if="article && !loading">
                    <h1 class="article-title">{{ article.title }}</h1>
                    <div class="article-meta">
                        <div class="meta-item">
                            <el-avatar 
                                :size="40" 
                                :src="article.user_avatar ? `/api/media/user/${article.user_avatar}` : ''"
                            >
                                <el-icon><User /></el-icon>
                            </el-avatar>
                            <div class="author-info">
                                <span class="author-name">{{ article.user_name }}</span>
                                <span class="publish-time">{{ formatDate(article.create_time) }}</span>
                            </div>
                        </div>
                        <div class="meta-stats">
                            <span class="stat-item">
                                <el-icon><View /></el-icon>
                                {{ article.page_view || 0 }}
                            </span>
                            <span class="stat-item">
                                <el-icon><ChatDotRound /></el-icon>
                                {{ article.comments || 0 }}
                            </span>
                            <span class="stat-item">
                                <el-icon><Star /></el-icon>
                                {{ article.likes || 0 }}
                            </span>
                        </div>
                    </div>
                    <div class="article-digest">
                        <p>{{ article.digest }}</p>
                    </div>
                </div>
                
                <!-- 加载状态 -->
                <div class="loading-state" v-if="loading">
                    <el-skeleton :rows="3" animated />
                </div>
                
                <!-- 错误状态 -->
                <div class="error-state" v-if="error">
                    <el-result icon="error" title="加载失败" :sub-title="error">
                        <template #extra>
                            <el-button type="primary" @click="fetchArticleDetail">重新加载</el-button>
                        </template>
                    </el-result>
                </div>
            </div>

            <div class="article-content" v-if="article && !loading">
                <div class="content-card">
                    <div class="content-header">
                        <h3><el-icon><Document /></el-icon>正文内容</h3>
                    </div>
                    <div class="markdown-content">
                        <v-md-preview :text="article.content" />
                    </div>
                </div>
            </div>

            <div class="comments-section" v-if="!loading">
                <div class="comments-header">
                    <h3><el-icon><ChatDotRound /></el-icon>评论区</h3>
                    <span class="comment-count">{{ comments.count }} 条评论</span>
                </div>
                
                <!-- 发表评论 -->
                <div class="comment-form">
                    <div class="comment-input-header">
                        <h4><el-icon><Edit /></el-icon>发表评论</h4>
                    </div>
                    <div class="comment-input-area">
                        <el-input
                            v-model="commentForm.content"
                            type="textarea"
                            :rows="4"
                            placeholder="写下你的评论..."
                            maxlength="500"
                            show-word-limit
                            resize="none"
                        />
                        <div class="comment-actions">
                            <el-button 
                                type="primary" 
                                :loading="commentSubmitting"
                                @click="submitComment"
                                :disabled="!commentForm.content.trim()"
                            >
                                {{ commentSubmitting ? '发表中...' : '发表评论' }}
                            </el-button>
                        </div>
                    </div>
                </div>
                
                <div class="comments-list" v-if="comments.data.length > 0">
                    <div class="comment-item" v-for="(cp, index) in comments.data" :key="cp.id">
                        <div class="comment-main">
                            <el-avatar 
                                :size="45" 
                                :src="cp.user_avatar ? `/api/media/user/${cp.user_avatar}` : ''" 
                                class="comment-avatar"
                            >
                                <el-icon><User /></el-icon>
                            </el-avatar>
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="username">{{ cp.user_name }}</span>
                                    <span class="comment-time">{{ formatDate(cp.create_time) }}</span>
                                </div>
                                <div class="comment-text">{{ cp.content }}</div>
                                <div class="comment-actions">
                                    <el-button 
                                        type="text" 
                                        size="small"
                                        @click="toggleReply(cp.id, cp.id, cp.user_name)"
                                    >
                                        <el-icon><ChatDotRound /></el-icon>
                                        回复
                                    </el-button>
                                </div>
                                <div class="comment-meta">
                                    <span 
                                        v-if="cp.son_comment_count > 0" 
                                        class="sub-comment-count"
                                        @click="toggleSubComments(cp.id)"
                                    >
                                        <el-icon v-if="loadingSubComments.has(cp.id)"><Loading /></el-icon>
                                        <el-icon v-else-if="expandedComments.has(cp.id)"><ArrowUp /></el-icon>
                                        <el-icon v-else><ArrowDown /></el-icon>
                                        {{ cp.son_comment_count }} 条回复
                                    </span>
                                </div>
                                
                                <!-- 回复输入框 -->
                                <div class="reply-form" v-if="replyingTo === cp.id">
                                    <div class="reply-input-area">
                                        <div v-if="replyForm.replyToUserName && replyForm.replyToUserName !== cp.user_name" class="reply-target-info">
                                            <el-icon><ChatDotRound /></el-icon>
                                            <span>回复 <span class="target-username">@{{ replyForm.replyToUserName }}</span></span>
                                        </div>
                                        <el-input
                                            v-model="replyForm.content"
                                            type="textarea"
                                            :rows="3"
                                            :placeholder="replyForm.replyToUserName ? `回复 @${replyForm.replyToUserName}...` : `回复 ${cp.user_name}...`"
                                            maxlength="500"
                                            show-word-limit
                                            resize="none"
                                        />
                                        <div class="reply-actions">
                                            <el-button 
                                                size="small" 
                                                @click="cancelReply"
                                            >
                                                取消
                                            </el-button>
                                            <el-button 
                                                type="primary" 
                                                size="small"
                                                :loading="replySubmitting"
                                                @click="submitReply(cp.id)"
                                                :disabled="!replyForm.content.trim()"
                                            >
                                                {{ replySubmitting ? '回复中...' : '回复' }}
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 子评论列表 -->
                        <div class="sub-comments" v-if="expandedComments.has(cp.id)">
                            <div class="sub-comments-header">
                                <div class="sub-comments-line"></div>
                                <span class="sub-comments-title">{{ cp.son_comment_count }} 条回复</span>
                            </div>
                            
                            <div class="sub-comments-list" v-if="subCommentsMap.has(cp.id)">
                                <div 
                                    class="sub-comment-item" 
                                    v-for="subComment in subCommentsMap.get(cp.id)" 
                                    :key="subComment.id"
                                >
                                    <el-avatar 
                                        :size="36" 
                                        :src="subComment.user_avatar ? `/api/media/user/${subComment.user_avatar}` : ''" 
                                        class="sub-comment-avatar"
                                    >
                                        <el-icon><User /></el-icon>
                                    </el-avatar>
                                    <div class="sub-comment-content">
                                        <div class="sub-comment-header">
                                            <span class="username">{{ subComment.user_name }}</span>
                                            <span class="comment-time">{{ formatDate(subComment.create_time) }}</span>
                                        </div>
                                        <div class="sub-comment-text">
                                            <span v-if="subComment.reply_comment && subComment.reply_comment !== cp.id && (subComment.reply_user_name || subComment.reply_username)" class="reply-to">
                                                回复 
                                                <span class="reply-username">@{{ subComment.reply_user_name || subComment.reply_username }}</span>
                                                ：
                                            </span>
                                            {{ subComment.content }}
                                        </div>
                                        <div class="sub-comment-actions">
                                            <el-button 
                                                type="text" 
                                                size="small"
                                                @click="toggleReply(cp.id, subComment.id, subComment.user_name)"
                                            >
                                                <el-icon><ChatDotRound /></el-icon>
                                                回复
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 子评论加载状态 -->
                            <div class="sub-comments-loading" v-if="loadingSubComments.has(cp.id)">
                                <el-skeleton :rows="2" animated />
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多评论按钮 -->
                <div class="load-more-section" v-if="comments.data.length > 0 && comments.hasMore">
                    <el-button 
                        type="primary" 
                        :loading="comments.loading" 
                        @click="loadMoreComments"
                        class="load-more-btn"
                    >
                        {{ comments.loading ? '加载中...' : '加载更多评论' }}
                    </el-button>
                </div>
                
                <!-- 评论加载状态 -->
                <div class="comments-loading" v-if="comments.loading && comments.data.length === 0">
                    <el-skeleton :rows="3" animated />
                </div>
                
                <div class="empty-comments" v-else-if="comments.data.length === 0 && !comments.loading">
                    <el-empty description="暂无评论，快来发表第一条评论吧！" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from "vue-router"
import { 
    User, 
    View, 
    ChatDotRound, 
    Star, 
    Document,
    Edit,
    ArrowUp,
    ArrowDown,
    Loading
} from '@element-plus/icons-vue'
import { getArticleDetail, getArticleComments, createComment, replyComment, getSubComments } from '@/api/community'

const route = useRoute()
const article = ref(null)
const loading = ref(true)
const error = ref('')

// 获取文章详情
const fetchArticleDetail = async () => {
    try {
        loading.value = true
        error.value = ''
        
        const data = await getArticleDetail(route.params.id)
        console.log('获取到的文章详情:', data)
        article.value = data
        
    } catch (err) {
        console.error('获取文章详情失败:', err)
        error.value = err.message || '获取文章详情失败'
        ElMessage.error('获取文章详情失败')
    } finally {
        loading.value = false
    }
}

// 评论数据和分页参数
const comments = reactive({
    data: [],
    count: 0,
    next: null,
    previous: null,
    loading: false,
    hasMore: true
})

const commentsParams = reactive({
    limit: 10,
    offset: 0
})

// 评论表单
const commentForm = reactive({
    content: ''
})

// 回复表单
const replyForm = reactive({
    content: '',
    replyToCommentId: null, // 被回复的评论ID
    replyToUserName: ''     // 被回复的用户名
})

// 评论提交状态
const commentSubmitting = ref(false)
const replySubmitting = ref(false)
const replyingTo = ref(null)

// 子评论相关状态
const subCommentsMap = ref(new Map()) // 存储每个评论的子评论数据
const expandedComments = ref(new Set()) // 存储已展开的评论ID
const loadingSubComments = ref(new Set()) // 存储正在加载子评论的评论ID

// 获取评论列表
const fetchComments = async (isLoadMore = false) => {
    if (comments.loading || (!isLoadMore && comments.data.length > 0)) return
    
    try {
        comments.loading = true
        
        const params = {
            limit: commentsParams.limit,
            offset: isLoadMore ? commentsParams.offset : 0
        }
        
        const response = await getArticleComments(route.params.id, params)
        console.log('获取到的评论数据:', response)
        
        if (isLoadMore) {
            // 加载更多评论，追加到现有数据
            comments.data = [...comments.data, ...response.results]
        } else {
            // 首次加载或刷新
            comments.data = response.results
        }
        
        comments.count = response.count
        comments.next = response.next
        comments.previous = response.previous
        comments.hasMore = response.next !== null
        
        // 更新分页参数
        commentsParams.offset = comments.data.length
        
    } catch (err) {
        console.error('获取评论失败:', err)
        ElMessage.error('获取评论失败')
    } finally {
        comments.loading = false
    }
}

// 加载更多评论
const loadMoreComments = () => {
    if (comments.hasMore && !comments.loading) {
        fetchComments(true)
    }
}

// 提交评论
const submitComment = async () => {
    if (!commentForm.content.trim()) {
        ElMessage.warning('请输入评论内容')
        return
    }
    
    try {
        commentSubmitting.value = true
        
        const data = {
            content: commentForm.content.trim(),
            article: parseInt(route.params.id)
        }
        
        console.log('提交评论数据:', data)
        
        await createComment(data)
        
        ElMessage.success('评论发表成功')
        
        // 清空表单
        commentForm.content = ''
        
        // 重新加载评论列表
        comments.data = []
        commentsParams.offset = 0
        comments.hasMore = true
        await fetchComments()
        
    } catch (err) {
        console.error('发表评论失败:', err)
        ElMessage.error('发表评论失败')
    } finally {
        commentSubmitting.value = false
    }
}

// 切换回复状态
const toggleReply = (parentCommentId, replyToCommentId = null, replyToUserName = '') => {
    if (replyingTo.value === parentCommentId) {
        cancelReply()
    } else {
        replyingTo.value = parentCommentId
        replyForm.content = ''
        replyForm.replyToCommentId = replyToCommentId || parentCommentId
        replyForm.replyToUserName = replyToUserName
    }
}

// 取消回复
const cancelReply = () => {
    replyingTo.value = null
    replyForm.content = ''
    replyForm.replyToCommentId = null
    replyForm.replyToUserName = ''
}

// 提交回复
const submitReply = async (parentCommentId) => {
    if (!replyForm.content.trim()) {
        ElMessage.warning('请输入回复内容')
        return
    }
    
    try {
        replySubmitting.value = true
        
        const data = {
            content: replyForm.content.trim(),
            article: parseInt(route.params.id),
            parent_comment: parentCommentId,
            reply_comment: replyForm.replyToCommentId || parentCommentId
        }
        
        console.log('提交回复数据:', data)
        
        await replyComment(data)
        
        ElMessage.success('回复发表成功')
        
        // 清空表单并关闭回复框
        cancelReply()
        
        // 重新加载评论列表
        comments.data = []
        commentsParams.offset = 0
        comments.hasMore = true
        await fetchComments()
        
        // 如果该评论的子评论已展开，重新加载子评论
        if (expandedComments.value.has(parentCommentId)) {
            await fetchSubComments(parentCommentId)
        }
        
    } catch (err) {
        console.error('发表回复失败:', err)
        ElMessage.error('发表回复失败')
    } finally {
        replySubmitting.value = false
    }
}

// 切换子评论展开状态
const toggleSubComments = async (commentId) => {
    if (expandedComments.value.has(commentId)) {
        // 如果已展开，则收起
        expandedComments.value.delete(commentId)
    } else {
        // 如果未展开，则展开并加载子评论
        expandedComments.value.add(commentId)
        await fetchSubComments(commentId)
    }
}

// 获取子评论
const fetchSubComments = async (parentCommentId) => {
    if (loadingSubComments.value.has(parentCommentId)) return
    
    try {
        loadingSubComments.value.add(parentCommentId)
        
        const response = await getSubComments(parentCommentId)
        console.log(`获取到评论${parentCommentId}的子评论:`, response)
        
        // 存储子评论数据
        subCommentsMap.value.set(parentCommentId, response.results || response)
        
    } catch (err) {
        console.error('获取子评论失败:', err)
        ElMessage.error('获取子评论失败')
        // 如果加载失败，移除展开状态
        expandedComments.value.delete(parentCommentId)
    } finally {
        loadingSubComments.value.delete(parentCommentId)
    }
}

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return ''
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    })
}

// 初始化数据
onMounted(() => {
    fetchArticleDetail()
    fetchComments()
})
</script>

<style lang="less" scoped>
.article-detail-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 30px;
    
    .breadcrumb {
        margin-bottom: 20px;
        
        :deep(.el-breadcrumb) {
            color: white;
            
            .el-breadcrumb__item {
                .el-breadcrumb__inner {
                    color: rgba(255, 255, 255, 0.8);
                    
                    &:hover {
                        color: white;
                    }
                }
            }
        }
    }
    
    .article-info {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        
        .article-title {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 20px;
            line-height: 1.4;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            
            .meta-item {
                display: flex;
                align-items: center;
                
                .author-info {
                    margin-left: 12px;
                    
                    .author-name {
                        display: block;
                        font-weight: 600;
                        color: #333;
                        margin-bottom: 2px;
                    }
                    
                    .publish-time {
                        font-size: 12px;
                        color: #666;
                    }
                }
            }
            
            .meta-stats {
                display: flex;
                gap: 20px;
                
                .stat-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #666;
                    
                    i {
                        margin-right: 4px;
                    }
                }
            }
        }
        
        .article-digest {
            p {
                font-size: 16px;
                color: #666;
                line-height: 1.6;
                margin: 0;
                font-style: italic;
            }
        }
    }
}

.article-content {
    margin-bottom: 40px;
    
    .content-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        
        .content-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(102, 126, 234, 0.2);
            
            h3 {
                font-size: 20px;
                color: #333;
                margin: 0;
                
                i {
                    margin-right: 8px;
                    color: #667eea;
                }
            }
        }
        
        .markdown-content {
            :deep(.v-md-preview) {
                background: transparent !important;
                
                .v-md-preview__content {
                    font-size: 16px;
                    line-height: 1.8;
                    color: #444;
                    
                    h1, h2, h3, h4, h5, h6 {
                        color: #333;
                        margin-top: 2em;
                        margin-bottom: 1em;
                    }
                    
                    p {
                        margin-bottom: 1.5em;
                    }
                    
                    code {
                        background: rgba(102, 126, 234, 0.1);
                        padding: 2px 4px;
                        border-radius: 4px;
                        font-size: 0.9em;
                    }
                    
                    pre {
                        background: #f8f9fa;
                        border-radius: 8px;
                        padding: 16px;
                        margin: 1.5em 0;
                        border: 1px solid rgba(0, 0, 0, 0.1);
                    }
                }
            }
        }
    }
}

.comments-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .comments-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.2);
        
        h3 {
            font-size: 20px;
            color: #333;
            margin: 0;
            
            i {
                margin-right: 8px;
                color: #667eea;
            }
        }
        
        .comment-count {
            font-size: 14px;
            color: #666;
            background: rgba(102, 126, 234, 0.1);
            padding: 4px 12px;
            border-radius: 20px;
        }
    }
    
    .comment-form {
        margin-bottom: 30px;
        padding: 25px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        border: 1px solid rgba(102, 126, 234, 0.2);
        
        .comment-input-header {
            margin-bottom: 15px;
            
            h4 {
                font-size: 16px;
                color: #333;
                margin: 0;
                display: flex;
                align-items: center;
                gap: 8px;
                
                .el-icon {
                    color: #667eea;
                }
            }
        }
        
        .comment-input-area {
            .el-textarea {
                margin-bottom: 15px;
                
                :deep(.el-textarea__inner) {
                    background: rgba(255, 255, 255, 0.9);
                    border: 1px solid rgba(102, 126, 234, 0.2);
                    border-radius: 8px;
                    padding: 12px;
                    font-size: 14px;
                    line-height: 1.5;
                    
                    &:focus {
                        border-color: #667eea;
                        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
                    }
                }
            }
            
            .comment-actions {
                display: flex;
                justify-content: flex-end;
                
                .el-button {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    border: none;
                    border-radius: 20px;
                    padding: 8px 20px;
                    color: white;
                    font-weight: 600;
                    
                    &:hover:not(:disabled) {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
                    }
                    
                    &:disabled {
                        opacity: 0.6;
                        cursor: not-allowed;
                    }
                }
            }
        }
    }
    
    .comments-list {
        .comment-item {
            margin-bottom: 25px;
            
            .comment-main {
                display: flex;
                align-items: flex-start;
                
                .comment-avatar {
                    flex-shrink: 0;
                    margin-right: 15px;
                }
                
                .comment-content {
                    flex: 1;
                    
                    .comment-header {
                        display: flex;
                        align-items: center;
                        margin-bottom: 8px;
                        
                        .username {
                            font-weight: 600;
                            color: #333;
                            margin-right: 12px;
                        }
                        
                        .comment-time {
                            font-size: 12px;
                            color: #999;
                        }
                    }
                    
                    .comment-text {
                        color: #555;
                        line-height: 1.6;
                        margin-bottom: 10px;
                        font-size: 15px;
                    }
                    
                    .comment-actions {
                        .el-button {
                            padding: 0;
                            font-size: 12px;
                            margin-right: 15px;
                            
                            &:hover {
                                color: #667eea;
                            }
                        }
                    }
                    
                    .comment-meta {
                        margin-top: 8px;
                        
                        .sub-comment-count {
                            display: inline-flex;
                            align-items: center;
                            gap: 4px;
                            font-size: 12px;
                            color: #667eea;
                            background: rgba(102, 126, 234, 0.1);
                            padding: 4px 10px;
                            border-radius: 12px;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            
                            &:hover {
                                background: rgba(102, 126, 234, 0.2);
                                transform: translateY(-1px);
                            }
                            
                            .el-icon {
                                font-size: 12px;
                            }
                        }
                    }
                    
                    .reply-form {
                        margin-top: 15px;
                        padding: 15px;
                        background: rgba(248, 249, 250, 0.8);
                        border-radius: 12px;
                        border: 1px solid rgba(102, 126, 234, 0.15);
                        
                        .reply-input-area {
                            .reply-target-info {
                                display: flex;
                                align-items: center;
                                gap: 6px;
                                margin-bottom: 8px;
                                padding: 6px 10px;
                                background: rgba(102, 126, 234, 0.1);
                                border-radius: 6px;
                                font-size: 13px;
                                color: #666;
                                
                                .el-icon {
                                    font-size: 14px;
                                    color: #667eea;
                                }
                                
                                .target-username {
                                    color: #667eea;
                                    font-weight: 600;
                                }
                            }
                            
                            .el-textarea {
                                margin-bottom: 12px;
                                
                                :deep(.el-textarea__inner) {
                                    background: rgba(255, 255, 255, 0.9);
                                    border: 1px solid rgba(102, 126, 234, 0.2);
                                    border-radius: 8px;
                                    padding: 10px;
                                    font-size: 14px;
                                    line-height: 1.5;
                                    
                                    &:focus {
                                        border-color: #667eea;
                                        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
                                    }
                                }
                            }
                            
                            .reply-actions {
                                display: flex;
                                justify-content: flex-end;
                                gap: 8px;
                                
                                .el-button {
                                    border-radius: 15px;
                                    padding: 6px 15px;
                                    font-size: 12px;
                                    
                                    &.el-button--primary {
                                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                        border: none;
                                        color: white;
                                        
                                        &:hover:not(:disabled) {
                                            transform: translateY(-1px);
                                            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
                                        }
                                        
                                        &:disabled {
                                            opacity: 0.6;
                                            cursor: not-allowed;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            .sub-comments {
                margin-top: 15px;
                margin-left: 60px;
                
                .sub-comments-header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;
                    
                    .sub-comments-line {
                        width: 30px;
                        height: 2px;
                        background: rgba(102, 126, 234, 0.3);
                        margin-right: 10px;
                    }
                    
                    .sub-comments-title {
                        font-size: 13px;
                        color: #666;
                        font-weight: 500;
                    }
                }
                
                .sub-comments-list {
                    .sub-comment-item {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 15px;
                        padding: 12px;
                        background: rgba(248, 249, 250, 0.6);
                        border-radius: 10px;
                        border: 1px solid rgba(102, 126, 234, 0.1);
                        
                        .sub-comment-avatar {
                            flex-shrink: 0;
                            margin-right: 12px;
                        }
                        
                        .sub-comment-content {
                            flex: 1;
                            
                            .sub-comment-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 6px;
                                
                                .username {
                                    font-weight: 600;
                                    color: #333;
                                    font-size: 14px;
                                }
                                
                                .comment-time {
                                    font-size: 12px;
                                    color: #999;
                                }
                            }
                            
                            .sub-comment-text {
                                color: #555;
                                line-height: 1.6;
                                font-size: 14px;
                                margin-bottom: 8px;
                                
                                .reply-to {
                                    color: #999;
                                    font-size: 13px;
                                    margin-right: 4px;
                                    
                                    .reply-username {
                                        color: #667eea;
                                        font-weight: 600;
                                        
                                        &:hover {
                                            color: #5a67d8;
                                        }
                                    }
                                }
                            }
                            
                            .sub-comment-actions {
                                .el-button {
                                    padding: 0;
                                    font-size: 12px;
                                    color: #667eea;
                                    
                                    &:hover {
                                        color: #5a67d8;
                                    }
                                }
                            }
                        }
                    }
                }
                
                .sub-comments-loading {
                    padding: 15px;
                    
                    .el-skeleton {
                        background: transparent;
                    }
                }
            }
        }
    }
    
    .empty-comments {
        text-align: center;
        padding: 40px 0;
    }
    
    .load-more-section {
        text-align: center;
        padding: 30px 0;
        
        .load-more-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-size: 14px;
            font-weight: 600;
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
            
            &:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            }
            
            &:disabled {
                opacity: 0.7;
                cursor: not-allowed;
            }
        }
    }
    
    .comments-loading {
        padding: 30px 0;
        
        .el-skeleton {
            background: transparent;
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .article-detail-container {
        padding: 10px;
    }
    
    .article-header .article-info,
    .article-content .content-card,
    .comments-section {
        padding: 20px;
        border-radius: 15px;
    }
    
    .article-header .article-info {
        .article-title {
            font-size: 22px;
        }
        
        .article-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }
    }
    
    .comments-section {
        .comment-form {
            padding: 15px;
            border-radius: 12px;
            
            .comment-input-header h4 {
                font-size: 14px;
            }
        }
        
        .comment-item {
            .comment-main {
                .comment-avatar {
                    margin-right: 10px;
                }
                
                .comment-content {
                    .reply-form {
                        padding: 12px;
                        
                        .reply-input-area {
                            .reply-target-info {
                                padding: 5px 8px;
                                font-size: 12px;
                                margin-bottom: 6px;
                                
                                .el-icon {
                                    font-size: 12px;
                                }
                                
                                .target-username {
                                    font-size: 12px;
                                }
                            }
                            
                            .reply-actions {
                                .el-button {
                                    padding: 5px 12px;
                                    font-size: 11px;
                                }
                            }
                        }
                    }
                }
            }
            
            .sub-comments {
                margin-left: 20px;
                
                .sub-comments-header {
                    margin-bottom: 10px;
                    
                    .sub-comments-line {
                        width: 20px;
                    }
                    
                    .sub-comments-title {
                        font-size: 12px;
                    }
                }
                
                .sub-comments-list {
                    .sub-comment-item {
                        padding: 10px;
                        margin-bottom: 10px;
                        
                        .sub-comment-avatar {
                            margin-right: 8px;
                        }
                        
                        .sub-comment-content {
                            .sub-comment-header {
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 2px;
                                
                                .username {
                                    font-size: 13px;
                                }
                                
                                .comment-time {
                                    font-size: 11px;
                                }
                            }
                            
                            .sub-comment-text {
                                font-size: 13px;
                                margin-bottom: 6px;
                                
                                .reply-to {
                                    font-size: 12px;
                                    margin-right: 3px;
                                    
                                    .reply-username {
                                        font-size: 12px;
                                        font-weight: 600;
                                    }
                                }
                            }
                            
                            .sub-comment-actions {
                                .el-button {
                                    font-size: 11px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// 加载和错误状态样式
.loading-state, .error-state {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 30px;
}

// 修复图标样式
.comments-header h3, .content-header h3, .comment-input-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .el-icon {
        color: #667eea;
    }
}
</style> 